<template>
  <div id='TerrainContainer'></div>
</template>

<script>
export default {
  data() {
    return {
      viewer: null
    }
  },
  mounted() {
    this.initCesium()
    this.addScreenSpaceEventHandler(this.viewer)
  },
  methods: {
    initCesium() {
      this.viewer = new Cesium.Viewer('TerrainContainer', {
        animation: false,
        baseLayerPicker: false,
        fullscreenButton: false,
        geocoder: false,
        homeButton: false,
        infoBox: false,
        sceneModePicker: false,
        navigationHelpButton: false,
        scene3DOnly: true,
        timeline: false,
        selectionIndicator: false, //是否显示选取指示器组件
        shouldAnimate: false, //自动播放动画控件
        shadows: true, //是否显示光照投射的阴影
        terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY, //地质接收阴影
        sceneMode: Cesium.SceneMode.SCENE3D,
        terrainProvider: new Cesium.CesiumTerrainProvider({//地质开挖必须是cesium提供的地形
          url: Cesium.IonResource.fromAssetId(1),
          requestVertexNormals: true,//顶点法线效果
          requestWaterMask: true//水效果
        })
      })
      this.viewer._cesiumWidget._creditContainer.style.display = 'none' //	去除版权信息
    },
    addScreenSpaceEventHandler(viewer) {
      let handler = viewer.screenSpaceEventHandler
      //  左键点击事件
      /*      handler.setInputAction((event)=>{
              console.log('左侧点击')
            },Cesium.ScreenSpaceEventType.LEFT_CLICK)*/
      handler.setInputAction(function (event) {
        console.log("鼠标左键点击" + event.position)//返回的是屏幕坐标
      },Cesium.ScreenSpaceEventType.LEFT_CLICK)
      handler.setInputAction(function (event) {
        console.log("鼠标左键双击" + event.position)//返回的是屏幕坐标
      },Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)

      handler.setInputAction(function (event) {
        console.log("鼠标左键按下" + event.position)//返回的是屏幕坐标
      },Cesium.ScreenSpaceEventType.LEFT_DOWN)

      handler.setInputAction(function (event) {
        console.log("鼠标左键弹起" + event.position)//返回的是屏幕坐标
      },Cesium.ScreenSpaceEventType.LEFT_UP)
    }
  }
}
</script>
<style scoped>
#TerrainContainer {
  height: 100%;
  width: 100%;
  background-color: red;
}
</style>
